@import "variables.scss";

// 鼠标hover效果
@mixin hoverOpacity() {
  transition: all .3s;
  opacity: 1;
  &:hover{
    cursor: pointer;
    opacity: .7;
  }
}
@mixin hoverTransformTop($top: 10px) {
  transition: all .3s;
  transform: translateY(0);
  &:hover{
    cursor: pointer;
    transform: translateY($top);
  }
}

// 超出行数变为...
@mixin clampN($index: 1) {
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:$index;
}
// 混入自定义函数带括号与带括号的区别： 带括号只会在用到的地方编译解析代码、不带括号会编译两次代码
// 注释区别： 单行注释(//)不会被编译到源码里 多行注释(/* */)会被编译到源码里
// 水平垂直定位居中
@mixin posCenterXY {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
// 水平定位居中
@mixin posCenterX {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
// 垂直定位居中
@mixin posCenterY {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
// flex伸缩布局 水平方向 垂直居中
@mixin flexRow {
  display: flex;
  align-items: center;
  flex-direction: row;
}
// flex伸缩布局 垂直方向
@mixin flexCol {
  display: flex;
  flex-direction: column;
}
// flex伸缩布局 水平方向 垂直居中 换行
@mixin flexRowWrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
}
// flex伸缩布局 水平垂直居中
@mixin flexRowCenter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
// flex伸缩布局 水平右对齐 垂直居中
@mixin flexRowEnd {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
}
// flex伸缩布局 水平垂直居中
@mixin flexRowStretch {
  display: flex;
  align-items: stretch;
  flex-direction: row;
}
// flex伸缩布局 水平垂直居中
@mixin flexColCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
// flex伸缩布局 垂直两端对齐
@mixin flexColSb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
// flex伸缩布局 水平居中 垂直两端对齐
@mixin flexColSbCenter {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
	align-items: center;
}
// flex伸缩布局 space-between 并居中
@mixin flexRowSb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
// flex伸缩布局 space-between 并居中和换行
@mixin flexRowSbWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
}
// flex伸缩布局 space-around 并居中
@mixin flexRowSa {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
}
// flex伸缩布局 space-around 并居中和换行
@mixin flexRowSaWrap {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

// grid网格布局 几行几列等比
@mixin gridRowCol($row: 1, $col: 1, $gap: 0) {
  display: grid;
  grid-template-rows: repeat($row, 1fr);
  grid-template-columns: repeat($col, 1fr);
  gap: $gap;
}
